<template>
  <view class="wrapper">
    <image src="/static/image/login-background.jpeg" class="bj" />
    <view class="content">
      <view class="logo">
        <image src="/static/image/login-background.jpeg" />
      </view>
      <view class="base-info">
        <view class="name-role">
          <view class="name"><text>{{ detailData.name }}</text></view>
          <view class="role"> <text>{{ detailData.role }}</text></view>
        </view>
        <div class="avatar">
          <image :src="detailData.avatar" />
        </div>
      </view>
      <view class="line">
        <view class="left-icon iconfont icon-tel"></view>
        <view class="text" @click="callPhone(detailData.tel)"><text>{{ detailData.tel }}</text></view>
        <view class="right-icon iconfont icon-small-tel"></view>
      </view>
      <view class="line">
        <view class="left-icon iconfont icon-email"></view>
        <view class="text" @click="copyText(detailData.email)"><text>{{ detailData.email }}</text></view>
      </view>
      <view class="line">
        <view class="left-icon iconfont icon-address"></view>
        <view class="text" @click="copyText(detailData.address)"><text>{{ detailData.address }}</text></view>
      </view>
      <view class="line">
        <view class="left-icon iconfont icon-desc"></view>
        <view class="text" @click="copyText(detailData.desc)"><text>{{ detailData.desc }}</text></view>
      </view>
      <view class="dividing-line"></view>
      <view class="btns">
        <view class="btn" @click="goToLawFirmAbout">
          <view class="icon iconfont icon-about"> </view>
          <view class="text">
            律所介绍
          </view>
        </view>
        <view class="btn" @click="goToLawyerDetail">
          <view class="icon iconfont icon-avatar"> </view>
          <view class="text">
            律师介绍
          </view>
        </view>
        <view class="btn" @click="handleNavigate">
          <view class="icon iconfont icon-navigation">
          </view>
          <view class="text">
            律所导航
          </view>
        </view>
        <view class="btn" @click="saveCard">
          <view class="icon iconfont icon-collect"> </view>
          <view class="text">
            保存名片
          </view>
        </view>
        <button open-type="share">
          <view class="btn">
            <view class="icon iconfont icon-share"> </view>
            <view class="text">
              分享名片
            </view>
          </view>
        </button>

      </view>
    </view>


  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getLawyerDetail } from '@/mockData/lawyerControl'
const detailData = ref<any>({})

onLoad(async (option) => {
  const id = option?.id || '';
  getDetail(id)
})

const getDetail = async (id: string) => {
  detailData.value = getLawyerDetail(id);
}

const goToLawFirmAbout = () => {
  uni.navigateTo({ url: '/pages/lawfirmAbout/lawfirmAbout' })
}

const goToLawyerDetail = () => {
  uni.navigateTo({ url: `/pages/lawyerDetail/lawyerDetail?id=${detailData.value.id}` })
}

const handleNavigate = () => {
  uni.openLocation({
    latitude: 34.759108,
    longitude: 113.77855,
    name: '郑州东站',
    address: '郑州市金水区心怡路199号'
  })
}
const saveCard = () => {
  const tmpDetailData = detailData.value;
  uni.addPhoneContact({
    firstName: tmpDetailData.name + '律师',
    organization: '律所',
    mobilePhoneNumber: tmpDetailData.tel,
    email: tmpDetailData.email,
    addressStreet: '中国大陆',
    workAddressStreet: tmpDetailData.address,
    remark: tmpDetailData.desc,
  })
}

const callPhone = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone
  })
}

const copyText = (text) => {
  uni.setClipboardData({
    data: text,
    showToast: true
  })
}

onShareAppMessage((res) => {
  console.log(detailData.value.id);

  return {
    title: '您好,这是我的名片,请惠存',
    // path: `/pages/lawyerCard/lawyerCard?id=${detailData.value.id}`,
    imageUrl: detailData.value.avatar,
  }
})

</script>

<style lang="scss" scoped>
.bj {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.wrapper {
  padding-top: 120rpx;

  .content {
    margin: 0 auto;
    padding: 60rpx;
    border: 1rpx solid #2a4791;
    border-radius: 26rpx;
    width: 620rpx;
    background-color: #fff;
    box-shadow: 0 0 5px 2px #9e9e9e;

    .logo {
      margin-top: 20rpx;
      height: 100rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }

    .base-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 60rpx;

      .name-role {
        .name {
          font-weight: bold;
          font-size: 20px;
        }

        .role {
          margin-top: 10rpx;
          font-weight: 500;
          color: #2a4791;
        }
      }

      .avatar {
        overflow: hidden;
        border-radius: 50%;
        width: 160rpx;
        height: 160rpx;

        .image {
          width: 100%;
          height: 100%;
          object-fit: fill;
        }
      }
    }

    .line {
      display: flex;
      margin-top: 20rpx;

      .left-icon {
        margin-right: 10rpx;
        font-size: 18px;
      }

      .text {
        font-size: 14px;
      }

      .right-icon {
        margin-left: 10rpx;
        font-size: 18px;
      }
    }

    .dividing-line {
      margin: 40rpx 0;
      height: 1rpx;
      background-color: #ccc;
    }
  }

  .btns {
    display: flex;
    justify-content: space-between;

    .btn {

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #777;
        border-radius: 50%;
        width: 80rpx;
        height: 80rpx;
        font-size: 20px;
      }

      .text {
        margin-top: 10rpx;
        font-size: 10px;
      }
    }
  }
}
</style>
@/mockData/lawyerControl
